﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>我就是个导航</title>
    <link rel="shortcut icon" href="favcion.ico" />
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
<div class="container" id="container">
    <aside class="left-bar" id="leftBar">
        <div class="title">
            <p>导航</p>
        </div>
        <nav class="nav">
            <div class="item active"><a href=""><i class="iconfont icon-daohang2"></i>导航栏</a><i class="line"></i></div>
            <ul class="nav-item" id="navItem">
                <li><a href="#platform" class="active"><i class="iconfont icon-shequ"></i>api导航</a></li>
                <li><a href="#tool"><i class="iconfont icon-blogger"></i>云平台</a></li>
                <li><a href="#other"><i class="iconfont icon-tool"></i>金融导航</a></li>
                <!--                    <li><a href="#tools"><i class="iconfont icon-tool"></i>金融导航</a></li>-->
                <!--                    <li><a href="#design"><i class="iconfont icon-designer"></i>设计资源</a></li>-->
                <!--                    <li><a href="#study"><i class="iconfont icon-xuexi1"></i>学无止境</a></li>-->
                <!--                    <li><a href="#operation"><i class="iconfont icon-yunying"></i>网络运营</a></li>-->
                <!--                    <li class="download"><a href="https://github.com/geekape/geek-navigation"><i class="iconfont icon-github"></i>源码下载</a></li>-->
            </ul>
            <!--                <div class="item comment"><a target="_blank" href="http://www.zcbboke.com/liuyan.html"><i class="iconfont icon-liuyan"></i>留言</a></div>-->
        </nav>
    </aside>
    <section class="main">
        <div id="mainContent">
            <!-- 手机端菜单 -->
            <div id="menu"><a href="#">菜单</a></div>

            <!-- 平台类 -->
            <div class="box">
                <a href="#" name="platform"></a>
                <div class="sub-category">
                    <div><i class="iconfont icon-shequ"></i>api导航</div>
                </div>
                <div>
                    <a target="_blank" href="https://open.douyin.com/">
                        <div class="item">
                            <div class="logo"><img src="img/douyin.ico" alt=""> 抖音开放平台</div>
                            <div class="desc">抖音开放平台</div>
                        </div>
                    </a>
                    <a target="_blank" href="https://open.kuaishou.com/platform">
                        <div class="item">
                            <div class="logo"><img src="img/kuaishou.ico" alt=""> 快手开放平台</div>
                            <div class="desc">快手开放平台</div>
                        </div>
                    </a>
                    <a target="_blank" href="https://open.jd.com/home/home#/index">
                        <div class="item">
                            <div class="logo"><img src="img/jdshangjia.png" alt=""> 京东商家开放平台</div>
                            <div class="desc">京东商家开放平台</div>
                        </div>
                    </a>
                    <a target="_blank" href="https://union.jd.com/openplatform">
                        <div class="item">
                            <div class="logo"><img src="img/jdlianmeng.ico" alt=""> 京东联盟</div>
                            <div class="desc">京东api v1.0</div>
                        </div>
                    </a>
                    <a target="_blank" href="https://jos.jd.com/">
                        <div class="item">
                            <div class="logo"><img src="img/jos-logo.png" alt=""> 宙斯开发者中心</div>
                            <div class="desc">京东api v2.0</div>
                        </div>
                    </a>
                    <a target="_blank" href="https://open.taobao.com/">
                        <div class="item">
                            <div class="logo"><img src="img/taobaokaifangpingtai.ico" alt=""> 淘宝开放平台</div>
                            <div class="desc">淘宝开放平台</div>
                        </div>
                    </a>

                </div>
            </div>

            <!-- 学习文档 -->
            <div class="box">
                <a href="#" name="tool"></a>
                <div class="sub-category">
                    <div><i class="iconfont icon-blogger"></i>云平台</div>
                </div>
                <div>
                    <a target="_blank" href="https://www.aliyun.com/">
                        <div class="item">
                            <div class="logo"><img src="img/aliyun.ico" alt="aliyun"> 阿里云</div>
                            <div class="desc">阿里云</div>
                        </div>
                    </a>
                    <a target="_blank" href="https://cloud.baidu.com/">
                        <div class="item">
                            <div class="logo"><img src="img/baiduyun.ico" alt="baiduyun"> 百度云</div>
                            <div class="desc">百度云</div>
                        </div>
                    </a>
                    <a target="_blank" href="https://activity.huaweicloud.com/">
                        <div class="item">
                            <div class="logo"><img src="img/huaweiyun.ico" alt="huaweiyun"> 华为云</div>
                            <div class="desc">华为云</div>
                        </div>
                    </a>
                    <a target="_blank" href="https://cloud.tencent.com/">
                        <div class="item">
                            <div class="logo"><img src="img/tengxunyun.ico" alt="tengxunyun"> 腾讯云</div>
                            <div class="desc">腾讯云</div>
                        </div>
                    </a>
                </div>
            </div>

            <!-- 金融导航 -->
            <div class="box">
                <a href="#" name="other"></a>
                <div class="sub-category">
                    <div><i class="iconfont icon-blogger"></i>金融导航</div>
                </div>
                <div>
                    <a target="_blank" href="https://www.yucezhe.com/product/data/trading">
                        <div class="item">
                            <div class="logo"><img src="img/yucezhe.png" alt=""> 预测者网</div>
                            <div class="desc">股票历史数据</div>
                        </div>
                    </a>
                    <a target="_blank" href="https://www.quantclass.cn/home">
                        <div class="item">
                            <div class="logo"><img src="img/xingbuxing.ico" alt=""> 邢不行量化小讲堂</div>
                            <div class="desc">邢不行量化小讲堂</div>
                        </div>
                    </a>

                </div>
            </div>
        </div>
    </section>
    <script>
        var oMenu = document.getElementById('menu');
        var oBtn = oMenu.getElementsByTagName('a')[0];
        var oLeftBar = document.getElementById('leftBar');
        oBtn.onclick = function() {
            if (oLeftBar.offsetLeft == 0) {
                oLeftBar.style.left = -249 + 'px';
            } else {
                oLeftBar.style.left = 0 + 'px';
            }
            if (document.documentElement.clientWidth <= 481) {
                document.onclick = function() {
                    if (oLeftBar.offsetLeft == 0) {
                        console.log(123);
                        oLeftBar.style.left = -249 + 'px';
                    }
                }
            }
        }

        var oNavItem = document.getElementById('navItem');
        var aA = oNavItem.getElementsByTagName('a');
        for(var i=0; i<aA.length; i++) {
        	aA[i].onclick = function() {
        		for(var j=0; j<aA.length; j++) {
        			aA[j].className = '';
        		}
        		this.className = 'active';
        	}
        }
    </script>
</div>
</body>

</html>